package myJs.components

import cats.effect.SyncIO
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import myJs.Implicits._
import myJs.Utils._
import myJs.myPkg.jquery._
import myJs.tool.Tool._

/** Created by yz on 3/11/2020
  */
object ToggleInlineComponent {

  case class Props(
      state: StateSnapshot[Boolean],
      label: String = "",
      name: String,
      fieldName: String,
      labelWidth: Int = 4,
      inputWidth: Int = 8,
      canChange: () => Boolean = () => true
  ) {
    @inline def render: VdomElement = Component(this)
  }

  class Backend(bs: BackendScope[Props, Unit]) {

    def render(p: Props) = {

      def toggleValid(toggleShow: Boolean, fieldName: String) = SyncIO {
        val bv = $("#form").bv
        val node = ReactDOM.findDOMNode(bs.raw).get.node
        val parentJq = $(node).parents(".myArg")
        if (fieldName.nonBlank) {
          val curJq = parentJq.findInputByName(fieldName)
          if (toggleShow) {
            bv.revalidateField(curJq)
          } else {
            bv.updateStatus(curJq, "VALID")
          }
        }
      }

      def defaultChange(checked: Boolean, canChange: () => Boolean)(e: ReactEventFromInput) = {
        toggleValid(checked, p.fieldName) >> {
          if (canChange()) {
            p.state.modState { x =>
              checked
            }
          } else {
            SyncIO {}
          }
        }
      }

      val s = p.state.value
      div(
        `class` := "form-group",
        label(`class` := s"control-label col-sm-${p.labelWidth}", s"${p.label}", ":"),
        div(
          `class` := s"col-sm-${p.inputWidth}",
          div(
            `class` := s"toggle btn ${if (s) "btn-primary" else "btn-light off"}",
            dataToggle := "toggle",
            role := "button",
            width := "53px",
            height := "34px",
            input(
              `class` := "myToggle",
              `type` := "checkbox",
              (checked := true).when(s),
              dataToggle := "toggle",
              dataOn := messages("yes"),
              dataOff := messages("no"),
              name := s"${p.name}",
              vDataId := "iPathContent",
              `class` := "",
              width := "100px",
              height := "32px",
              value := "true",
              onChange --> SyncIO.unit
            ),
            div(
              `class` := "toggle-group",
              label(
                `for` := "",
                `class` := "btn btn-primary toggle-on",
                messages("yes"),
                onClick ==> defaultChange(false, canChange = p.canChange)
              ),
              label(
                `for` := "",
                `class` := "btn btn-light toggle-off",
                messages("no"),
                onClick ==> defaultChange(true, canChange = p.canChange)
              ),
              span(`class` := "toggle-handle btn btn-light")
            )
          )
        )
      )
    }
  }

  val Component = ScalaComponent.builder[Props].renderBackend[Backend].build

}
